import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';
import { emptyStyle } from '../empty/empty.css';
import { GRID_CELL_PADDING, GRID_LINE_HEIGHT } from '../gridBaseConfig';

export const gridLineHeightVar = createVar();
export const gridCellPaddingVar = createVar();

export const gridStyle = style({
	background: vars.color.panelBackground,
	position: 'relative',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'flex-start',
	padding: '0',
	borderRadius: vars.layout.smallRadius,
	overflow: 'auto',
	border: `1px solid ${vars.color.border}`,
	height: '20em',
	WebkitUserSelect: 'none',
	userSelect: 'none',
	outline: 'none',
});

globalStyle(`${gridStyle}>div`, {
	display: 'flex',
	flexShrink: '0',
	flexGrow: '0',
	flexBasis: '0',
	position: 'absolute',
	cursor: 'default',
});

// ## modify body
globalStyle(`${gridStyle}>div.body>div.line`, {
	display: 'flex',
	flexShrink: '0',
	flexGrow: '0',
	flexBasis: '0',
});

globalStyle(`${gridStyle}>div.body`, {
	flexDirection: 'column',
	alignItems: 'stretch',
});

globalStyle(`${gridStyle}>div.anchor`, {
	display: 'inline-block',
	position: 'absolute',
	left: '0',
	top: '0',
	width: '1px',
	height: '1px',
	opacity: '0',
	zIndex: '-1',
});

globalStyle(`${gridStyle}[column-size=scale]`, {
	overflowX: 'hidden',
});

// ## modify body >div.line
globalStyle(`${gridStyle}[column-size=fixed]>div.body`, {
	width: 'max-content',
});

globalStyle(`${gridStyle}[column-size=scale]>div`, {
	width: '100%',
});

globalStyle(`${gridStyle}[column-size=auto]>div`, {
	minWidth: '100%',
});

// resize column
globalStyle(`${gridStyle}>div.head>div>div`, {
	display: 'flex',
	flex: '1',
	flexDirection: 'row',
	alignItems: 'center',
	WebkitUserSelect: 'none',
	userSelect: 'none',
	fontWeight: 'bold',
});

globalStyle(`${gridStyle}>div.head>div>div.handle`, {
	position: 'absolute',
	cursor: 'col-resize',
	width: '11px',
	right: '-5px',
	top: '0',
	bottom: '0',
	zIndex: '1',
});

globalStyle(`${gridStyle}>div.head>div:last-child>div.handle`, {
	width: '15px',
	right: '-7px',
});

// ## modify body
globalStyle(`${gridStyle}>div.head>div>div:first-child,${gridStyle}>div.body>div.line>div`, {
	overflow: 'hidden',
});

// borders ## modify body
globalStyle(`${gridStyle}>div.head>div,${gridStyle}>div.body>div.line>div`, {
	display: 'flex',
	alignItems: 'center',
	boxSizing: 'border-box',
	position: 'relative',
	borderBottom: `1px solid ${vars.color.border}`,
	// backgroundColor: vars.color.panelBackground,
	padding: fallbackVar(gridCellPaddingVar, GRID_CELL_PADDING),
	lineHeight: fallbackVar(gridLineHeightVar, GRID_LINE_HEIGHT),
});
globalStyle(`${gridStyle}>div.head>div`, {
	backgroundColor: vars.color.panelBackground,
});
globalStyle(`${gridStyle}>div.body>div.line>div.fixed`, {
	backgroundColor: vars.color.panelBackground,
});
// ## modify body
globalStyle(`${gridStyle}.highligh-hover>div.body>div.line:hover>div`, {
	backgroundColor: vars.color.windowBackground,
});

// ## modify body
globalStyle(
	`${gridStyle}>div.body>div.line.active>div,${gridStyle}>div.body>div.line.active:hover>div`,
	{
		backgroundColor: vars.color.selectionBlur,
	},
);

// ## modify body
globalStyle(
	`${gridStyle}:focus>div.body>div.line.active>div,${gridStyle}:focus>div.body>div.line.active:hover>div`,
	{
		backgroundColor: vars.color.selection,
	},
);

globalStyle(
	`${gridStyle}>div.body>div.line.disable>div,${gridStyle}>div.body>div.line.disable:hover>div`,
	{
		backgroundColor: 'transparent',
		color: vars.color.disabledText,
	},
);

// ## modify body
globalStyle(
	`${gridStyle}>div.head>div.rb,${gridStyle}>div.body>div.line>div.rb,${gridStyle}[column-border]>div.head>div,${gridStyle}[column-border]>div.body>div.line>div`,
	{
		borderRight: `1px solid ${vars.color.border}`,
	},
);

// ## modify body
globalStyle(`${gridStyle}>div.body>div.line.last>div`, {
	borderBottom: 'none',
});

// ## modify body
globalStyle(
	`${gridStyle}[column-size=scale]>div.head>div:last-child,${gridStyle}[column-size=scale]>div.body>div.line>div:last-child,${gridStyle}[column-size=auto]>div.head>div:last-child,${gridStyle}[column-size=auto]>div.body>div.line>div:last-child`,
	{
		borderRight: 'none',
		overflow: 'hidden',
	},
);

// sort
globalStyle(`${gridStyle}>div.head>div.sort`, {
	cursor: 'pointer',
});

globalStyle(`${gridStyle}>div.head>div span.sort svg`, {
	width: '1.4em',
	height: '1.4em',
	fill: vars.color.placeholderText,
});

globalStyle(`${gridStyle}>div.head>div span.sort.asc svg`, {
	fill: vars.color.accent,
});

globalStyle(`${gridStyle}>div.head>div span.sort.desc svg`, {
	fill: vars.color.accent,
});

// text align
globalStyle(`${gridStyle} .left`, {
	textAlign: 'left',
	justifyContent: 'left',
});

globalStyle(`${gridStyle} .center`, {
	textAlign: 'center',
	justifyContent: 'center',
});

globalStyle(`${gridStyle} .right`, {
	textAlign: 'right',
	justifyContent: 'right',
});

globalStyle(`${gridStyle} ${emptyStyle}`, {
	margin: '1.5em',
});

// fixed header
globalStyle(`${gridStyle} div.head`, {
	position: 'sticky',
	top: '0px',
	zIndex: '2',
});

globalStyle(`${gridStyle}>div.empty`, {
	flex: '1',
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	position: 'sticky',
	left: '0',
	width: '100%',
});

globalStyle(`${gridStyle}>div.empty>div`, {
	borderBottom: 'none',
	borderRight: 'none',
});

export const gridDragIndicatorStyle = style({
	position: 'fixed',
	pointerEvents: 'none',
	backgroundColor: vars.color.accent,
	zIndex: '100000',
	height: '0px',
	display: 'flex',
	border: `2px solid ${vars.color.accent}`,
	borderLeft: `4px solid ${vars.color.accent}`,
	borderRight: `4px solid ${vars.color.accent}`,
	flexDirection: 'row',
	alignItems: 'center',
	selectors: {
		'&.over': {
			backgroundColor: 'transparent',
			border: `4px solid ${vars.color.accent}`,
		},
	},
});

globalStyle(`${gridDragIndicatorStyle} svg`, {
	position: 'relative',
	left: 'calc(-1.5em + 4px)',
	width: '1.5em',
	height: '1.5em',
	backgroundColor: vars.color.accent,
	fill: vars.color.panelBackground,
	borderRadius: '2px',
});
